<template>
	<view class="user-info-box fz15">
		<view class="info-line-box space-between">
			<view class="">
				头像
			</view>
			<image class="user-head-img" @click="shangcds" :src="user_info.avatar" mode=""></image>
		</view>
		<view class="info-line-box space-between">
			<view class="">
				昵称
			</view>
			<view class="c9">
				{{user_info.nickname}}
			</view>
		</view>
		<view class="info-line-box space-between" @click="selectGender">
			<view class="">
				性别
			</view>
			<view class="c9">
				<text class="mr5">{{user_info.gender === 0 ? '女' : '男'}}</text>
				<image class="right-icon" src="../../../static/my/right_icon.png" mode=""></image>
			</view>
		</view>
		<view class="info-line-box space-between" @click="selectTime">
			<view class="">
				生日
			</view>
			<view class="c9">
				<text class="mr5">{{user_info.birthday == null ? '' : user_info.birthday}}</text>
				<image class="right-icon" src="../../../static/my/right_icon.png" mode=""></image>
			</view>
		</view>
		<!-- 选择性别 -->
		<u-picker v-model="is_show_gender" @confirm="affirmSelectGender" @cancel="cancelSelcetGender" mode="selector"
			:range="men_and_women" range-key="name" :default-selector="[Number(user_info.gender)]"
			:mask-close-able='false'></u-picker>
		<!-- 选择年月日 -->
		<u-picker mode="time" start-year='1900' :end-year='new_time' v-model="is_show_time" @confirm="affirmSelectTime"
			@cancel="cancelSelcetTime" :default-time="user_info.birthday == null ? '' : user_info.birthday"
			:mask-close-able='false'></u-picker>
		<u-modal v-model="sbshow" @confirm="confirmdad" :content="content" title="获取存储权限"
			show-cancel-button="false"></u-modal>
	</view>
</template>

<script>
	import {
		getUserinfo,
		profile,
		uploadingImage,
	} from '@/network/loginAndMy.js'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				sbshow: false,
				men_and_women: [{
						name: '女'
					},
					{
						name: '男'
					}
				],
				is_show_gender: false, // 是否显示性别弹窗
				is_show_time: false, // 是否显示年月日弹窗
				new_time: new Date().getFullYear(), // 当前年份
				user_info: {}, // 用户信息
				uploading_image: '', // 上传image
				content: 'App需要您的同意才能访问相册，用于编辑用户信息'
			}
		},
		mounted() {
			this.getUserinfo()
		},
		methods: {
			// 获取用户信息
			getUserinfo() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.user_info = res.data
					}
				})
			},
			// 修改用户头像
			profile() {
				let params = {
					gender: this.user_info.gender,
					nickname: this.user_info.nickname,
					birthday: this.user_info.birthday,
					avatar: this.uploading_image,
				}
				profile(params).then(res => {
					if (res.code == 1) {
						this.getUserinfo()
						this.gengx()
					}
				})
			},
			// 修改用户性别
			profile_sex() {
				let baseUrl = "https://huijiank.com";
				let params = {
					gender: this.user_info.gender,
					nickname: this.user_info.nickname,
					birthday: this.user_info.birthday,
					avatar: this.user_info.avatar.slice(baseUrl.length),
				}
				profile(params).then(res => {
					if (res.code == 1) {
						this.getUserinfo()
					}
				})
			},
			// 修改用户生日
			profile_birthday() {
				let baseUrl = "https://huijiank.com";
				let params = {
					gender: this.user_info.gender,
					nickname: this.user_info.nickname,
					birthday: this.user_info.birthday,
					avatar: this.user_info.avatar.slice(baseUrl.length),
				}
				profile(params).then(res => {
					if (res.code == 1) {
						this.getUserinfo()
					}
				})
			},
			shangcds() {
				this.sbshow = true
			},
			confirmdad() {
				this.submit()
			},
			// 上传头像
			submit() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						pathToBase64(res.tempFilePaths[0])
							.then(path => {
								this.uploadingImage(path)
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			uploadingImage(image_url) {
				uploadingImage({
					file: image_url
				}).then(res => {
					if (res.code == 1) {
						this.uploading_image = res.data
						this.profile(1)

					}
				})
			},
			gengx() {
				uni.$TUIKit.updateMyProfile({
						nick: this.user_info.nickname,
						avatar: this.user_info.avatar,
						gender: uni.$TUIKitTIM.TYPES.GENDER_MALE,
						selfSignature: '我的个性签名',
						allowType: uni.$TUIKitTIM.TYPES.ALLOW_TYPE_ALLOW_ANY
					}).then(imResponse => {})
					.catch(err => {})
			},
			// 选择性别
			selectGender() {
				this.is_show_gender = true
			},
			// 确认选择性别
			affirmSelectGender(value) {
				this.user_info.gender = value[0]
				this.profile_sex()
				this.is_show_gender = false
			},
			// 取消选择性别
			cancelSelcetGender() {
				this.is_show_gender = false
			},
			// 选择生日
			selectTime() {
				this.is_show_time = true
			},
			// 确认选择时间
			affirmSelectTime(value) {
				this.user_info.birthday = `${value.year}-${value.month}-${value.day}`
				this.profile_birthday()
				this.is_show_time = false
			},
			// 取消选择时间
			cancelSelcetTime() {
				this.is_show_time = false
			},
		},
	}
</script>

<style lang="scss">
	.user-info-box {
		background-color: #F3F3F3;
		min-height: 100vh;

		.info-line-box {
			height: 108rpx;
			line-height: 108rpx;
			width: 100%;
			background-color: #ffffff;
			padding: 0 30rpx;
			position: relative;

			.user-head-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.right-icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.info-line-box::after {
			content: "";
			width: 690rpx;
			height: 2rpx;
			background-color: #F2F2F2;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.info-line-box:last-child::after {
			content: "";
			width: 690rpx;
			height: 2rpx;
			background-color: transparent;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.slot-content {
			padding: 20rpx 40rpx;
		}
	}
</style>